<template>
  <div >
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header header header-demo" winter="">
        <div class="layui-header">
          <a class="logo" href="/">
            <img src="static/img/home/logo.png" alt="layui">
          </a>
          <ul class="layui-nav layui-layout-right" style="right: 3%;">
            <li style="position: relative; display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;line-height: 60px;">
            <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner"><img src="http://t.cn/RCzsdCq"  class="layui-nav-img"/>jialin</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>我的消息</el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </li>
          </ul>
        </div>
      </div>

      <div class="layui-side layui-bg-black">
       <!-- <div class="layui-side-scroll">
          &lt;!&ndash; 左侧导航区域（可配合layui已有的垂直导航） &ndash;&gt;
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">所有商品</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="javascript:;">列表三</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">发布商品</a></li>
          </ul>
        </div>-->
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <router-view></router-view>
      </div>

      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>


    </div>

</template>

<script>

  import API from '@/api'

  export default {
    name: "Home",
    data() {
      return {
        //isAccordion: true,    // 是否开启手风琴模式，开启后每次至多展开一个子菜单
        //isCollapsed: false,
        //openNames: [],
      };
    },
    mounted: function () {
      layui.use('element', function(){
        var element = layui.element;

      });
    }

    /*,
    created:{

    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      },
      // TODO: 获取权限菜单列表
      getMenus: function () {
        return this.$store.getters.getMenus;
      }
    },
    methods: {


      // TODO: 选择菜单（MenuItem）时触发  返回值： name
      selectMenuName: function (name) {
        console.log(name)
        // let path = 'home/'+name;
        // this.$router.push({path: path});
      },

      // TODO:当 展开/收起 子菜单时触发；当前展开的 Submenu 的 name 值数组
      selectSubmenuNames: function (names) {
        console.log(names)
      },

      // TODO: 退出
      logout: function () {
        API.common.logout().then(({data}) => {

          if (data.code == 0){
            // 清除 cookie
            this.$store.commit('logout');

            // 清除 权限菜单
            sessionStorage.removeItem('menus');

            // 跳转登录
            this.$router.push({path: '/'});

          } else {
            this.$Message.error(data.msg);
          };

        }).catch((data) => {
          this.$Message.error('连接失败，请检查网络！');
        });
      },


    }*/
  }
</script>

<style scoped>
  /*.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }*/
</style>
